<template lang="pug">
  .container.homework__main
    .row.nextMain
        .next-header
          .header-avator
          .header-name 扯扯撤（已追踪）
          .header-intro 高三个性学习报告
          a.header-other 查看其他学生
        .next-main
          .main-list
            table.homework__tb
              tr
                td 名字
                td 得分
                td 名次
                td 年级名次
                td 年级得分
              tr(v-for="item in info")
                td {{item.title}}
                td {{item.score}} 
                td {{item.rank}}
                td {{item.classRank}}
                td {{item.classScore}}
            .hr
</template>
<style lang="scss">
.homework__main {

  // nextMain
  .nextMain {
    margin-left: 0;
    margin-right: 0;
    .next-header {
      margin-bottom: 10px;
      padding-left: 38px;
      width: 100%;
      height: 46px;
      line-height: 46px;
      background: #FAFAFA;
      border-radius: 10px;    
      .header-avator,.header-name,.header-intro {
        float: left;
      }
      .header-avator {
        width: 46px;
        height: 46px;
        border: 1px solid gray;
        border-radius: 6px;
        margin-right: 18px;
      }
      .header-name {
        font-size: 14px;
        margin-right: 14px;
      }
      .header-intro {
        color: #A5A5A5;
        font-size: 12px;
      }
      .header-other {
        float: right;
        display: inline-block;
        margin-right: 14px;
        border: 1px solid #157EF2;
        border-radius: 6px;
        width: 100px;
        font-size: 10px;
        color: #157EF2;
        text-align: center;
        cursor: pointer;
        line-height: 28px;
        margin-top: 8px;      
      }
      .header-other:hover {
        color: #fff;
        background-color: #157EF2;
      }
    }
    .next-main {
      padding-left: 38px;
      width: 100%;
      background: #FAFAFA;
      border-radius: 10px;      
      .main-list {
        .hr {
          height: 10px;
          width: 100%;
          background: #fff;
        }
        .homework__tb {
          margin-bottom: 20px;
          clear: both;
          margin-top: 20px;
        }
        .homework__tb td {
          width: 23%;
          .se-shape {
            width: 18px;
            height: 18px;
            border: 1px solid #157EF2;
            border-radius: 4px;
            float: left;
            margin-right: 6px;
            vertical-align: middle;
            cursor: pointer;            
          }
          .se-center {
            margin-left: 26px;
          }
          .time {
            border: 1px solid #157EF2;
            width: 80px;
            height: 20px;
            display: inline-block;
            text-align: center;
            border-radius: 4px;
            color: #157EF2;            
          }
        }
        .homework__tb td:nth-child(1) {
          width: 25%;
        }
      }
      .stu-list {
        margin-top: 24px;
        font-size: 12px;
        height: 100px;
        overflow: auto;
        .stu-title {
          width: 6%;
          float: left;
          height: 100px;
        }
        .stu-detail {
          float: left;
          margin-right: 28px;
          margin-bottom: 20px;
          width: 70px;
          .se-shape {
            width: 18px;
            height: 18px;
            border: 1px solid #157EF2;
            border-radius: 4px;
            float: left;
            margin-right: 6px;
            vertical-align: middle;
            cursor: pointer;
          }
        }
      }
    }
    .next-btns {
      text-align: center;
      margin: 40px auto;
      .btn {
        display: inline-block;
        width: 120px;
        height: 36px;
        border: 1px solid #157EF2;
        color: #157EF2;
        cursor: pointer;
        margin-left: 100px;
      }
      .btn:hover {
        background-color: #157EF2;
        color: #fff;
      }
    }
  }

}

</style>
<script>
import api from 'api/tutorship'
export default {
  data () {
    return {
      list: [],
      info: [{
        title: '2016年第一学期高一年级5月数学考试试卷',
        score: 5,
        rank: 234,
        classRank: 32,
        classScore: 32
      }, {
        title: '2016年第一学期高一年级5月数学考试试卷',
        score: 5,
        rank: 234,
        classRank: 32,
        classScore: 32
      }, {
        title: '2016年第一学期高一年级5月数学考试试卷',
        score: 5,
        rank: 234,
        classRank: 32,
        classScore: 32
      }, {
        title: '2016年第一学期高一年级5月数学考试试卷',
        score: 5,
        rank: 234,
        classRank: 32,
        classScore: 32
      }, {
        title: '2016年第一学期高一年级5月数学考试试卷',
        score: 5,
        rank: 234,
        classRank: 32,
        classScore: 32
      }, {
        title: '2016年第一学期高一年级5月数学考试试卷',
        score: 5,
        rank: 234,
        classRank: 32,
        classScore: 32
      }]
    }
  },
  mounted () {
    api.getList('2', {
      studentid: '120176400199057431',
      from: 0,
      size: 10
    }).then((Response) => {
      const data = Response.data
      this.list = data.data.list
    })
  },
  methods: {
    submit () {
      this.$router.push('/student/homework/score')
    },
    addworkNext () {
      this.addwork = false
    }
  }
}
</script>

